<script setup lang="ts">
import { getLabelApi } from '@/api/label_api';
import { onMounted } from 'vue';


import { ref } from 'vue';
import type { labelData } from '@/utils/interface';
const labelList = ref<labelData[]>([]);
const getLabel = async () => {
  try {
    const res = await getLabelApi({});
    labelList.value = res.data.data;
    console.log('标签数据', labelList.value)
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  getLabel();
})

</script>

<template>
    <div class="lg:w-[900px] md:w-[470px] sm:w-[300px] mx-auto mb-8">
        <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg p-6 border border-gray-100" style="box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
            <h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-6 pb-3 border-b border-gray-200 flex items-center font-sans tracking-wide">
                <span class="inline-block w-1 h-6 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full mr-3"></span>
                文章标签
            </h2>
            <div class="flex flex-row flex-wrap justify-center gap-3">
                <div v-for="(item, index) in labelList" :key="item.id" :class="[
                    'px-4 py-2 rounded-full font-medium text-sm md:text-base font-sans tracking-wide',
                    'sm:px-3 sm:py-2 sm:text-xs',
                    'md:px-4 md:py-2 md:text-sm',
                    'lg:px-4 lg:py-2 lg:text-base',
                    index % 3 === 0 ? 'bg-gradient-to-r from-blue-400 to-blue-500 text-white shadow-sm' :
                    index % 3 === 1 ? 'bg-gradient-to-r from-amber-400 to-orange-400 text-white shadow-sm' :
                    'bg-gradient-to-r from-rose-400 to-pink-400 text-white shadow-sm'
                ]">
                    {{ item.label_name }}
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
